<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Grid</title>
    <style>
      .g6-tooltip {
        border: 1px solid #e2e2e2;
        border-radius: 4px;
        font-size: 12px;
        color: #545454;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 10px 8px;
        box-shadow: rgb(174, 174, 174) 0px 0px 10px;
      }
    </style>
  </head>

  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      const data = {
        nodes: [
          {
            id: '0',
            label: 'node-0',
            x: 100,
            y: 100,
            description: 'This is node-0.',
            subdescription: 'This is subdescription of node-0.',
          },
          {
            id: '1',
            label: 'node-1',
            x: 250,
            y: 100,
            description: 'This is node-1.',
            subdescription: 'This is subdescription of node-1.',
          },
          {
            id: '2',
            label: 'node-2',
            x: 150,
            y: 350,
            description: 'This is node-2.',
            subdescription: 'This is subdescription of node-2.',
          },
          {
            id: '3',
            label: 'node-3',
            x: 420,
            y: 380,
            description: 'This is node-3.',
            subdescription: 'This is subdescription of node-3.',
          },
        ],
        edges: [
          {
            id: 'e0',
            source: '0',
            target: '1',
            description: 'This is edge from node 0 to node 1.',
          },
          {
            id: 'e1',
            source: '0',
            target: '2',
            description: 'This is edge from node 0 to node 2.',
          },
          {
            id: 'e2',
            source: '0',
            target: '3',
            description: 'This is edge from node 0 to node 3.',
          },
        ],
      };
      const graph = new G6.Graph({
        container: 'mountNode',
        width: 800,
        height: 600,
        defaultNode: {
          size: [80, 40],
          shape: 'rect',
        },
        defaultEdge: {
          style: {
            lineAppendWidth: 3,
          },
        },
        modes: {
          default: [
            'drag-node',
            {
              type: 'tooltip',
              formatText(model) {
                const text = 'description: ' + model.description;
                return text;
              },
              shouldUpdate: e => {
                return true;
              },
            },
            {
              type: 'edge-tooltip',
              formatText(model) {
                const text = 'description: ' + model.description;
                return text;
              },
              shouldUpdate: e => {
                return true;
              },
            },
          ],
        },
      });
      graph.data(data);
      graph.render();
    </script>
  </body>
</html>
